<%@include file="menu/util.jsp" %>
<%@page contentType="text/html; charset=iso-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <fmt:bundle basename="app">
        <head>
            <title><fmt:message key="login.title.tag" /></title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <jsp:include page="menu/header.jsp" />
            <%-- remember to name the variables the same as the attributes --%>
            <script type='text/javascript' src='https://www.google.com/jsapi'></script>
            <script type='text/javascript'>

                var chart;

                google.load('visualization', '1', {packages:['orgchart']});
                google.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Name');
                    data.addColumn('string', 'Manager');
                    data.addColumn('string', 'ToolTip');
                    data.addRows([
                        [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
                        [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
                        ['Alice', 'Mike', ''],
                        ['Bob', 'Jim', 'Bob Sponge'],
                        ['Carol', 'Bob', '']
                    ]);

                    var options = {
                        allowCollapse: true,
                        allowHtml:true
                    };

                    chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
                    chart.draw(data, options);


                    google.visualization.events.addListener(chart, 'select', selectHandler);
                    alert("Agregue listener");

                }



                function selectHandler() {

                    var selection = chart.getSelection();
                    var collapsedItems= chart.getCollapsedNodes();

                    for (var i = 0; i < selection.length; i++) {
                        var item = selection[i];
                        var temp= true;

                        for(var j=0; j < collapsedItems.length; j++){
                            var item2= collapsedItems[j];

                            if(item.row == item2){
                                temp= false;
                                j= collapsedItems.length +1;
                                
                            }
                        }
                        chart.collapse(item.row, temp);
                    }


                }




            </script>



        </head>
        <body>

            <div id='chart_div'></div>

        </body>
    </fmt:bundle>
</html>
